<template>
  <ares-scroll
    ref="scroll"
    :data="list"
    :options="options"
    @pulling-down="onPullingDown"
    @pulling-up="onPullingUp">
      <nodata v-if="isNodata"></nodata>
      <div v-if="!isNodata">
        <div class="item" v-for="(item, $index) in 20" :key="$index" @click="showDetail(item)">
          <div class="title">
            计划管理
          </div>
          <div class="depart">章三 南方电网</div>
        </div>       
        <template slot="pullup" v-if="allLoaded && list && list.length > 0">
          <div class="no-more-data">没有更多数据了</div>
        </template>        
      </div>
  </ares-scroll>    
</template>

<script>
import Nodata from './nodata';

export default {
  data() {
    return {
      isNodata: false,
      defaultPageSize: 10,
      list: [],
      allLoaded: false,
      pageNumber: 1,
      options: {
        pullDownRefresh: {
          txt: '更新成功',
        }, // 下来加载开启
        pullUpLoad: true, // 上拉加载开启
        scrollbar: true, // 是否需要滚动条
      },
    };
  },
  components: {
    Nodata,
  },
  watch: {
  },
  methods: {
    showDetail(item) {
      this.$router.push({
        name: 'ViewDetail',
        query: {
          id: item.id,
        },
      });
    },
    query() {
      this.pageNumber = 1;
      this.list = [];
      this.allLoaded = false;
      this.isNodata = false;
      this.getList({
        pageNumber: 1,
        pageSize: this.defaultPageSize,
      });
    },
    getList(options, callback) {
      return
      this.$api.get('queryPlanManagement', options).then((data) => {
        if (options.pageNumber === 1) {
          this.list = data.listList.listItem;
          this.isNodata = !this.list || this.list.length;
        } else {
          this.list = this.list.concat(data.listList.listItem);
        }
        // 更新页码
        this.pageNumber = options.pageNumber;
        // 判断数据是否加载结束
        this.allLoaded = this.defaultPageSize * data.pageNo >= data.count;
      }).catch((err) => {
        // eslint-disable-next-line no-console
        console.log(err);
      }).finally(() => {
        if (callback) callback();
      });
    },
    onPullingDown() {
      setTimeout(() => {
        this.$refs.scroll.forceUpdate();
      }, 1000);
    },
    onPullingUp() {
      this.getList({
        pageNumber: this.pageNumber + 1,
        pageSize: this.defaultPageSize,
      }, () => {
        if (this.allLoaded) {
          this.options.pullUpLoad = false;
        }
      });
    },
  },
};
</script>
<style scoped lang='less'>
.item {
  .line(bottom);
  position: relative;
  background-color: #fff;
  padding: 15px;
  .title {
    line-height: 30px;
  };
  .depart {
    color: #808080;
    font-size: 13px;
  };
}
</style>
